From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 12 May 2021 22:42:12 +0200
Subject: ui: Migrate from CRA to Next.js

This change updates the web frontend to use Next.js instead of Create
React App (CRA). Next.js enables the possibility of rendering pages on
the server side (which reduces the time to first frame) and overall
provides a better development experience.

Future commits will try to futher optimize the implementation for
Next.js.
---
 .../projects/[project]/portfolios/[portfolio].js   | 37 ++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js

(limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
new file mode 100644
index 00000000..76a8d23b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useRouter } from 'next/router'
+import App from '../../../../containers/app/App'
+
+function Project() {
+    const router = useRouter()
+    const { project, portfolio } = router.query
+
+    if (project && portfolio) {
+        return <App projectId={project} portfolioId={portfolio} />
+    }
+
+    return <div />
+}
+
+export default Project
-- 
cgit v1.2.3


From 1ce8bf170cda2afab334cd330325cd4fbb97dab4 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 11:46:57 +0200
Subject: ui: Split App container into separate components

This change splits the App container into separate pages, as a starting
point for removing much of the unnecessary state from Redux.
---
 .../projects/[project]/portfolios/[portfolio].js   | 45 ++++++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index 76a8d23b..b21db44c 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -21,17 +21,46 @@
  */
 
 import { useRouter } from 'next/router'
-import App from '../../../../containers/app/App'
+import Head from 'next/head'
+import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer'
+import React, { useEffect } from 'react'
+import { useProject } from '../../../../data/project'
+import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer'
+import PortfolioResultsContainer from '../../../../containers/app/results/PortfolioResultsContainer'
+import { useDispatch } from 'react-redux'
+import { openPortfolioSucceeded } from '../../../../redux/actions/portfolios'
 
-function Project() {
+/**
+ * Page that displays the results in a portfolio.
+ */
+function Portfolio() {
     const router = useRouter()
-    const { project, portfolio } = router.query
+    const { project: projectId, portfolio: portfolioId } = router.query
+
+    const project = useProject(projectId)
+    const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC'
 
-    if (project && portfolio) {
-        return <App projectId={project} portfolioId={portfolio} />
-    }
+    const dispatch = useDispatch()
+    useEffect(() => {
+        if (portfolioId) {
+            dispatch(openPortfolioSucceeded(projectId, portfolioId))
+        }
+    }, [projectId, portfolioId, dispatch])
 
-    return <div />
+    return (
+        <div className="page-container full-height">
+            <Head>
+                <title>{title}</title>
+            </Head>
+            <AppNavbarContainer fullWidth={true} />
+            <div className="full-height app-page-container">
+                <ProjectSidebarContainer />
+                <div className="container-fluid full-height">
+                    <PortfolioResultsContainer />
+                </div>
+            </div>
+        </div>
+    )
 }
 
-export default Project
+export default Portfolio
-- 
cgit v1.2.3


From 9c8a987556d0fb0cdf0eb67e0c191a8dcc5593b9 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 17:30:15 +0200
Subject: ui: Fetch scenarios and portfolios using React Query

---
 .../src/pages/projects/[project]/portfolios/[portfolio].js        | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index b21db44c..d3d61271 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -23,12 +23,11 @@
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer'
-import React, { useEffect } from 'react'
+import React from 'react'
 import { useProject } from '../../../../data/project'
 import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer'
 import PortfolioResultsContainer from '../../../../containers/app/results/PortfolioResultsContainer'
 import { useDispatch } from 'react-redux'
-import { openPortfolioSucceeded } from '../../../../redux/actions/portfolios'
 
 /**
  * Page that displays the results in a portfolio.
@@ -41,11 +40,6 @@ function Portfolio() {
     const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC'
 
     const dispatch = useDispatch()
-    useEffect(() => {
-        if (portfolioId) {
-            dispatch(openPortfolioSucceeded(projectId, portfolioId))
-        }
-    }, [projectId, portfolioId, dispatch])
 
     return (
         <div className="page-container full-height">
-- 
cgit v1.2.3


From 803e13b32cf0ff8b496649fb0a4d6e32400e98a4 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 14 Jul 2021 22:23:40 +0200
Subject: feat(ui): Migrate to PatternFly 4 design framework

This change is a rewrite of the existing OpenDC frontend in order to
migrate to the PatternFly 4 design framework.

PatternFly is used by Red Hat for various computing related services such
as OpenShift, Red Hat Virtualization and Cockpit. Since their design
requirements are very similar to those of OpenDC (modeling computing
services), migrating to PatternFly 4 allows us to re-use design choices
from these services.

See https://www.patternfly.org/v4/ for more information about
PatternFly.
---
 .../projects/[project]/portfolios/[portfolio].js   | 170 ++++++++++++++++++---
 1 file changed, 151 insertions(+), 19 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index d3d61271..55bee445 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -22,12 +22,41 @@
 
 import { useRouter } from 'next/router'
 import Head from 'next/head'
-import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer'
-import React from 'react'
-import { useProject } from '../../../../data/project'
-import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer'
-import PortfolioResultsContainer from '../../../../containers/app/results/PortfolioResultsContainer'
-import { useDispatch } from 'react-redux'
+import React, { useRef } from 'react'
+import { usePortfolio, useProject } from '../../../../data/project'
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    Card,
+    CardActions,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    Chip,
+    ChipGroup,
+    DescriptionList,
+    DescriptionListDescription,
+    DescriptionListGroup,
+    DescriptionListTerm,
+    Divider,
+    Grid,
+    GridItem,
+    PageSection,
+    PageSectionVariants,
+    Skeleton,
+    Tab,
+    TabContent,
+    Tabs,
+    TabTitleText,
+    Text,
+    TextContent,
+} from '@patternfly/react-core'
+import { AppPage } from '../../../../components/AppPage'
+import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
+import ScenarioTable from '../../../../components/projects/ScenarioTable'
+import NewScenario from '../../../../components/projects/NewScenario'
+import { METRIC_NAMES } from '../../../../util/available-metrics'
+import PortfolioResults from '../../../../components/app/results/PortfolioResults'
 
 /**
  * Page that displays the results in a portfolio.
@@ -36,24 +65,127 @@ function Portfolio() {
     const router = useRouter()
     const { project: projectId, portfolio: portfolioId } = router.query
 
-    const project = useProject(projectId)
-    const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC'
+    const { data: project } = useProject(projectId)
+    const { data: portfolio } = usePortfolio(portfolioId)
 
-    const dispatch = useDispatch()
+    const overviewRef = useRef(null)
+    const resultsRef = useRef(null)
+
+    const breadcrumb = (
+        <Breadcrumb>
+            <BreadcrumbItem to="/projects" component={BreadcrumbLink}>
+                Projects
+            </BreadcrumbItem>
+            <BreadcrumbItem to={`/projects/${projectId}`} component={BreadcrumbLink}>
+                Project details
+            </BreadcrumbItem>
+            <BreadcrumbItem to={`/projects/${projectId}/portfolios/${portfolioId}`} component={BreadcrumbLink} isActive>
+                Portfolio
+            </BreadcrumbItem>
+        </Breadcrumb>
+    )
 
     return (
-        <div className="page-container full-height">
+        <AppPage breadcrumb={breadcrumb}>
             <Head>
-                <title>{title}</title>
+                <title>{project?.name ?? 'Portfolios'} - OpenDC</title>
             </Head>
-            <AppNavbarContainer fullWidth={true} />
-            <div className="full-height app-page-container">
-                <ProjectSidebarContainer />
-                <div className="container-fluid full-height">
-                    <PortfolioResultsContainer />
-                </div>
-            </div>
-        </div>
+            <PageSection variant={PageSectionVariants.light}>
+                <TextContent>
+                    <Text component="h1">Portfolio</Text>
+                </TextContent>
+            </PageSection>
+            <PageSection type="none" variant={PageSectionVariants.light} className="pf-c-page__main-tabs" sticky="top">
+                <Divider component="div" />
+                <Tabs defaultActiveKey={0} className="pf-m-page-insets">
+                    <Tab
+                        eventKey={0}
+                        title={<TabTitleText>Overview</TabTitleText>}
+                        tabContentId="overview"
+                        tabContentRef={overviewRef}
+                    />
+                    <Tab
+                        eventKey={1}
+                        title={<TabTitleText>Results</TabTitleText>}
+                        tabContentId="results"
+                        tabContentRef={resultsRef}
+                    />
+                </Tabs>
+            </PageSection>
+            <PageSection isFilled>
+                <TabContent eventKey={0} id="overview" ref={overviewRef} aria-label="Overview tab">
+                    <Grid hasGutter>
+                        <GridItem md={2}>
+                            <Card>
+                                <CardTitle>Details</CardTitle>
+                                <CardBody>
+                                    <DescriptionList>
+                                        <DescriptionListGroup>
+                                            <DescriptionListTerm>Name</DescriptionListTerm>
+                                            <DescriptionListDescription>
+                                                {portfolio?.name ?? <Skeleton screenreaderText="Loading portfolio" />}
+                                            </DescriptionListDescription>
+                                        </DescriptionListGroup>
+                                        <DescriptionListGroup>
+                                            <DescriptionListTerm>Scenarios</DescriptionListTerm>
+                                            <DescriptionListDescription>
+                                                {portfolio?.scenarioIds.length ?? (
+                                                    <Skeleton screenreaderText="Loading portfolio" />
+                                                )}
+                                            </DescriptionListDescription>
+                                        </DescriptionListGroup>
+                                        <DescriptionListGroup>
+                                            <DescriptionListTerm>Metrics</DescriptionListTerm>
+                                            <DescriptionListDescription>
+                                                {portfolio?.targets?.enabledMetrics ? (
+                                                    portfolio.targets.enabledMetrics.length > 0 ? (
+                                                        <ChipGroup>
+                                                            {portfolio.targets.enabledMetrics.map((metric) => (
+                                                                <Chip isReadOnly key={metric}>
+                                                                    {METRIC_NAMES[metric]}
+                                                                </Chip>
+                                                            ))}
+                                                        </ChipGroup>
+                                                    ) : (
+                                                        'No metrics enabled'
+                                                    )
+                                                ) : (
+                                                    <Skeleton screenreaderText="Loading portfolio" />
+                                                )}
+                                            </DescriptionListDescription>
+                                        </DescriptionListGroup>
+                                        <DescriptionListGroup>
+                                            <DescriptionListTerm>Repeats per Scenario</DescriptionListTerm>
+                                            <DescriptionListDescription>
+                                                {portfolio?.targets?.repeatsPerScenario ?? (
+                                                    <Skeleton screenreaderText="Loading portfolio" />
+                                                )}
+                                            </DescriptionListDescription>
+                                        </DescriptionListGroup>
+                                    </DescriptionList>
+                                </CardBody>
+                            </Card>
+                        </GridItem>
+                        <GridItem md={6}>
+                            <Card>
+                                <CardHeader>
+                                    <CardActions>
+                                        <NewScenario portfolioId={portfolioId} />
+                                    </CardActions>
+                                    <CardTitle>Scenarios</CardTitle>
+                                </CardHeader>
+                                <CardBody>
+                                    <ScenarioTable portfolioId={portfolioId} />
+                                </CardBody>
+                            </Card>
+                        </GridItem>
+                    </Grid>
+                </TabContent>
+                <TabContent eventKey={1} id="results" ref={resultsRef} aria-label="Results tab" hidden>
+                    <PortfolioResults portfolioId={portfolioId} />
+                </TabContent>
+            </PageSection>
+        </AppPage>
     )
 }
 
-- 
cgit v1.2.3


From 5e5ab63b280eb446db4090733cd3ad2e97d02018 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 15:47:23 +0200
Subject: refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.
---
 .../src/pages/projects/[project]/portfolios/[portfolio].js          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index 55bee445..53cc9c73 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -53,10 +53,10 @@ import {
 } from '@patternfly/react-core'
 import { AppPage } from '../../../../components/AppPage'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
-import ScenarioTable from '../../../../components/projects/ScenarioTable'
-import NewScenario from '../../../../components/projects/NewScenario'
 import { METRIC_NAMES } from '../../../../util/available-metrics'
-import PortfolioResults from '../../../../components/app/results/PortfolioResults'
+import NewScenario from '../../../../components/portfolios/NewScenario'
+import ScenarioTable from '../../../../components/portfolios/ScenarioTable'
+import PortfolioResults from '../../../../components/portfolios/results/PortfolioResults'
 
 /**
  * Page that displays the results in a portfolio.
-- 
cgit v1.2.3


From 28d6d13844db28745bc2813e87a367131f862070 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 20:59:11 +0200
Subject: refactor(ui): Move page components in separate files

---
 .../projects/[project]/portfolios/[portfolio].js   | 93 +---------------------
 1 file changed, 4 insertions(+), 89 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index 53cc9c73..28b03c37 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -23,27 +23,12 @@
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import React, { useRef } from 'react'
-import { usePortfolio, useProject } from '../../../../data/project'
 import {
     Breadcrumb,
     BreadcrumbItem,
-    Card,
-    CardActions,
-    CardBody,
-    CardHeader,
-    CardTitle,
-    Chip,
-    ChipGroup,
-    DescriptionList,
-    DescriptionListDescription,
-    DescriptionListGroup,
-    DescriptionListTerm,
     Divider,
-    Grid,
-    GridItem,
     PageSection,
     PageSectionVariants,
-    Skeleton,
     Tab,
     TabContent,
     Tabs,
@@ -53,10 +38,8 @@ import {
 } from '@patternfly/react-core'
 import { AppPage } from '../../../../components/AppPage'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
-import { METRIC_NAMES } from '../../../../util/available-metrics'
-import NewScenario from '../../../../components/portfolios/NewScenario'
-import ScenarioTable from '../../../../components/portfolios/ScenarioTable'
-import PortfolioResults from '../../../../components/portfolios/results/PortfolioResults'
+import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview'
+import PortfolioResults from '../../../../components/portfolios/PortfolioResults'
 
 /**
  * Page that displays the results in a portfolio.
@@ -65,9 +48,6 @@ function Portfolio() {
     const router = useRouter()
     const { project: projectId, portfolio: portfolioId } = router.query
 
-    const { data: project } = useProject(projectId)
-    const { data: portfolio } = usePortfolio(portfolioId)
-
     const overviewRef = useRef(null)
     const resultsRef = useRef(null)
 
@@ -88,7 +68,7 @@ function Portfolio() {
     return (
         <AppPage breadcrumb={breadcrumb}>
             <Head>
-                <title>{project?.name ?? 'Portfolios'} - OpenDC</title>
+                <title>Portfolio - OpenDC</title>
             </Head>
             <PageSection variant={PageSectionVariants.light}>
                 <TextContent>
@@ -114,72 +94,7 @@ function Portfolio() {
             </PageSection>
             <PageSection isFilled>
                 <TabContent eventKey={0} id="overview" ref={overviewRef} aria-label="Overview tab">
-                    <Grid hasGutter>
-                        <GridItem md={2}>
-                            <Card>
-                                <CardTitle>Details</CardTitle>
-                                <CardBody>
-                                    <DescriptionList>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Name</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.name ?? <Skeleton screenreaderText="Loading portfolio" />}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Scenarios</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.scenarioIds.length ?? (
-                                                    <Skeleton screenreaderText="Loading portfolio" />
-                                                )}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Metrics</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.targets?.enabledMetrics ? (
-                                                    portfolio.targets.enabledMetrics.length > 0 ? (
-                                                        <ChipGroup>
-                                                            {portfolio.targets.enabledMetrics.map((metric) => (
-                                                                <Chip isReadOnly key={metric}>
-                                                                    {METRIC_NAMES[metric]}
-                                                                </Chip>
-                                                            ))}
-                                                        </ChipGroup>
-                                                    ) : (
-                                                        'No metrics enabled'
-                                                    )
-                                                ) : (
-                                                    <Skeleton screenreaderText="Loading portfolio" />
-                                                )}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                        <DescriptionListGroup>
-                                            <DescriptionListTerm>Repeats per Scenario</DescriptionListTerm>
-                                            <DescriptionListDescription>
-                                                {portfolio?.targets?.repeatsPerScenario ?? (
-                                                    <Skeleton screenreaderText="Loading portfolio" />
-                                                )}
-                                            </DescriptionListDescription>
-                                        </DescriptionListGroup>
-                                    </DescriptionList>
-                                </CardBody>
-                            </Card>
-                        </GridItem>
-                        <GridItem md={6}>
-                            <Card>
-                                <CardHeader>
-                                    <CardActions>
-                                        <NewScenario portfolioId={portfolioId} />
-                                    </CardActions>
-                                    <CardTitle>Scenarios</CardTitle>
-                                </CardHeader>
-                                <CardBody>
-                                    <ScenarioTable portfolioId={portfolioId} />
-                                </CardBody>
-                            </Card>
-                        </GridItem>
-                    </Grid>
+                    <PortfolioOverview portfolioId={portfolioId} />
                 </TabContent>
                 <TabContent eventKey={1} id="results" ref={resultsRef} aria-label="Results tab" hidden>
                     <PortfolioResults portfolioId={portfolioId} />
-- 
cgit v1.2.3


From f84dc9f8b8b4eaa7621f9ee4fc83ef38a85c431b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 17 Aug 2021 11:30:29 +0200
Subject: feat(ui): Add context selectors

This change adds context selectors for the OpenDC frontend where the
user can select different projects, portfolios or topologies from the
context selection bar.
---
 .../src/pages/projects/[project]/portfolios/[portfolio].js   | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index 28b03c37..d1533d98 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -37,6 +37,9 @@ import {
     TextContent,
 } from '@patternfly/react-core'
 import { AppPage } from '../../../../components/AppPage'
+import ContextSelectionSection from '../../../../components/context/ContextSelectionSection'
+import PortfolioSelector from '../../../../components/context/PortfolioSelector'
+import ProjectSelector from '../../../../components/context/ProjectSelector'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
 import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview'
 import PortfolioResults from '../../../../components/portfolios/PortfolioResults'
@@ -65,8 +68,15 @@ function Portfolio() {
         </Breadcrumb>
     )
 
+    const contextSelectors = (
+        <ContextSelectionSection>
+            <ProjectSelector projectId={projectId} />
+            <PortfolioSelector projectId={projectId} portfolioId={portfolioId} />
+        </ContextSelectionSection>
+    )
+
     return (
-        <AppPage breadcrumb={breadcrumb}>
+        <AppPage breadcrumb={breadcrumb} contextSelectors={contextSelectors}>
             <Head>
                 <title>Portfolio - OpenDC</title>
             </Head>
-- 
cgit v1.2.3